网站横幅切换jquery 插件-白红宇

网站横幅切换jquery 插件

阅读量：4941 次

发布时间：2019-06-11

本文共 9077 字，大约阅读时间需要 30 分钟。

最近做一个web项目，站点首页需要像页面类似的切换横幅，有兴趣的可以先看看它的效果，这样就比较容易理解为什么我单独做个插件。其实类似的 jquery 插件网上类似的多的去了，随便网上下了两做了个demo 演示一下，效果不错吗！：）我是在全屏的状态下看的，效果还行，当把屏幕切小之后问题就出来了，屏幕小了之后图片的后面部分显示不出来了，本来的效果应该是如果屏幕小了应该把图片两边不重要的部分隐藏掉，但是由于网上的插件都是直接生成的 img 元素，我的网站页面body元素固定宽度，居中的，所以出现前面说的问题。

怎么办呢，本来想在别的插件基础上改一下，后来看改动比较多，干脆自己写个算了，以后用起来也方便。

我的思路是，首先要实现上面的效果不用 img 元素，我选择了用 span 元素给它添加背景图片，显示方式为 inline-block，这样比较容易。

由于需要切换 span 定位方式为绝对定位，外面包一层 div容器定位方式为 relative 这样在切换的时候只要把要显示的 span 设置为 display: block; ，其余的全部设置为 display: none; 切换就解决了。

然后就是通用性问题，给插件留下灵活的配置项跟事件接口。想了想大概就需要几项吧。

设置项

图片切换间隔时间

动画完成时间

是否自动切换

事件接口

图片切换完成事件

切换到最后一张图片

插件加载完成

思路理清了，下面奉上插件代码：

1 /*  2 * 横幅切换插件  3 * 作者：     封浩  4 * 创建日期： 2015-04-03  5 * 版本：     v1.0  6 */  7 (function ($) {  8     var mySlider = function (element, options) {  9         var settings = $.extend({}, $.fn.switchImg.defaults, options); 10         var variables = { 11             currentIndex: 0, 12             nextIndex: 0, 13             total: 0,  14             paused: true, //当前切换状态是否停止 15             imgHeight: 0, 16             operation:"+"//控制移动方向 17         };  18          19         var slider = $(element); 20  21         //图片切换容器 22         var sliderContent = $('
      
').addClass('nivo-main').width(slider.width()); 23         //小圆点容器 24         var controlNav = $('
      
').addClass('nivo-controlNav').attr("data-stop", "true"); 25         //左右切换按钮容器 26         var btnContent = '
      
       前进
       后退
       
      
'; 27  28         var bodyWidth = $("body").width(); 29         var dataDiv = slider.find("div:first-child"); 30         var self = this;  31         var images = dataDiv.find("img"); 32         images.each(function (i) { 33             var child = $(this); 34             var link = child.attr("data-link"); 35             var src = child.attr("src"); 36             var height = "0", active = "", display = 'inline-block'; 37             if (i == 0) { 38                 variables.imgHeight = height = child.height() === 0 ? child.attr(height) : child.height(); 39                 active = "active"; 40             } else { 41                 bodyWidth = 0; 42                 display = "none"; 43             } 44  45             if ($.trim(link) != "") { 46                 sliderContent.append(''); 47             } else { 48                 sliderContent.append(''); 49             } 50             controlNav.append('' + i + ''); 51             variables.total++; 52         }); 53         dataDiv.hide(); 54  55         //加载前事件 56         settings.afterLoad(); 57         slider.append(btnContent); 58         slider.append(sliderContent); 59         slider.append(controlNav); 60  61         $(window).resize(function () { 62             var width = $("body").width(); 63             slider.children('.nav-main').width(width); 64             sliderContent.find("span:eq(" + variables.currentIndex + ")").css({ width: width }); 65         }); 66  67         initEvent(); 68         var timer = 0; 69         if (images.length > 1 && settings.autoStart) { 70             initTime(); 71         } 72  73         var toNext = function () { 74             if (variables.nextIndex < 0) { 75                 variables.nextIndex = variables.total - 1; 76                 settings.lastSlide(); 77             } else if (variables.nextIndex > variables.total - 1) { 78                 variables.nextIndex = 0; 79                 settings.lastSlide(); 80             } 81             var nextImg = sliderContent.find("span:eq(" + variables.nextIndex + ")"); 82             var currentImg = sliderContent.find("span:eq(" + variables.currentIndex + ")"); 83          84             sliderContent.find("span:eq(" + variables.nextIndex + ")").css({ height: variables.imgHeight, position: 'absolute', width: $("body").width(), top: 0, 'z-index': 4 }); 85  86             currentImg.stop(true, true); 87             nextImg.stop(true, true); 88  89             //淡入淡出效果 90             currentImg.fadeOut(settings.animateTime); 91             nextImg.fadeIn(settings.animateTime, settings.slideshowEnd); 92             controlNav.find("a").removeClass("active"); 93             controlNav.find("a:eq(" + variables.nextIndex + ")").addClass("active"); 94             variables.currentIndex = variables.nextIndex; 95         }; 96  97         //开始切换 98         var switchStart = function (operator) { 99             stop();100             if (operator == "+") {101                 variables.nextIndex = variables.currentIndex + 1;102             } else if (operator == "-") {103                 variables.nextIndex = variables.currentIndex - 1;104             }105             toNext();106         }107 108         function initEvent() {109             //小点110             $(".nivo-control", slider).mouseover(function () {111                 var index = parseInt($(this).attr("rel"));112                 variables.nextIndex = index;113                 switchStart("");114             }).mouseout(function () {115                 initTime(variables.operation);116             });117 118             //图片119             $("span", sliderContent).mouseout(function () {120                 initTime(variables.operation);121             }).mouseover(function () {122                 stop();123             });124 125             //上一张,下一张126             $(".nivo-NextContent a", slider).click(function () {127                 variables.operation = $(this).attr("data-opt");128                 settings.autoStart = true;129                 switchStart(variables.operation);130             }).mouseout(function () {131                 initTime(variables.operation);132             });133         }134 135         function initTime(operator) { 136             if (variables.paused && settings.autoStart){137                 timer = setInterval(function () {138                     if (operator == "-") {139                         variables.nextIndex--;140                     } else {141                         variables.nextIndex++;142                     }143                     toNext();144                 }, settings.pauseTime);145                 variables.paused = false; 146             }147         }148         149         var stop = function () {150             clearInterval(timer);151             variables.paused = true; 152         };153 154         return this;155     };156 157     $.fn.switchImg = function (options) {158         return this.each(function () {159             var element = $(this); 160             if (element.data('data-switch')) return element.data('data-switch');161             var switchObj = new mySlider(this, options);162             element.data('data-switch', switchObj);163         });164     };165 166     167     $.fn.switchImg.defaults = {168         pauseTime: 3000,    //图片切换间隔时间169         animateTime: 2000,  //动画完成时间 170         autoStart: true,    //是否自动滚动171         slideshowEnd: function () { }, //图片切换完成172         lastSlide: function () { },    //切换到最后一张图片173         afterLoad: function () { }     //插件加载完成174     };175     176 })(jQuery);

View Code

调用的时候有几点需要注意的

切换横幅插件数据源必须安装下面的结构书写。

如果想给生成的横幅添加超链接，必须在 img 元素里添加 data-link 属性并指定链接地址。

如果在在 img 元素里添加 height 属性，生成的横幅高度以 height 值为准，否则以第一个图片高度为准。

　　　　<div>

</div>

页面调用示例：

View Code

插件样式

body {
        padding: 0;    margin: 0;}.nivoSlider {
        position: relative;}.nivo-main {
        position: relative;    height: 399px;}.nivo-main span {
        background-position: center top;    display: inline-block;}.nivoSlider .nivo-prevNav, .nivoSlider .nivo-nextNav {
        cursor: pointer;}.nivoSlider .nivo-controlNav {
        padding: 0;    position: relative;    text-align: center;    top: -50px;    z-index: 100;}.nivoSlider .nivo-controlNav .nivo-control {
        background: url("bullets.png") no-repeat scroll 0 0 transparent;    border: 0 none;    display: inline-block;    height: 22px;    margin: 0 2px;    text-indent: -9999px;    width: 22px;}.nivoSlider .nivo-controlNav .active {
        background: url("bullets.png") no-repeat scroll 0 -22px transparent;}.nivoSlider .nivo-NextContent {
        position: relative;    top: 190px;}.nivoSlider .nivo-NextContent a {
        background: url("arrows.png") no-repeat scroll 0 0 transparent;    border: 0 none;    display: block;    height: 30px;    text-indent: -9999px;    width: 30px;    cursor: pointer;    position: absolute;    z-index: 9;}.nivoSlider a.nivo-nextNav {
        background-position: 100% 50%;    right: 20px;    float: left;}.nivoSlider a.nivo-prevNav {
        background-position: 0 50%;    left: auto;    float: right;    left: 20px;}

View Code

为了方便大家使用，我把源码打包放到云盘上，欢迎大家

转载于:https://www.cnblogs.com/fengh/p/4398808.html

你可能感兴趣的文章